<template>
	<view class="container">
		<view class="iner">基本信息</view>
		<view class="headerNumber" @click="handleProducts">
			<view style="font-size: 24rpx;">生产单号</view>
			<view style="font-size: 26rpx;color: #999999 ;" >{{model.no || '请选择生产单号'}}></view>
		</view>
		<view class="iner" v-if="materials.length>0">成品入库信息</view>
		<view class="productStore" v-if="materials.length>0">
			<view class="productHeader">
				<view style="display: flex;align-items: center;">
					<view>成品名称：</view>
					<view style="color: #999999 ;">{{materials[0].productName || '暂无数据'}}</view>
				</view>
				<view class="imgBlock">
					<image @click="handeleNewStore" class="img" src="/static/work/cg_add03.png" mode=""></image>
				</view>
			</view>
			<!-- 选择库，选择货位 -->
			<view class="productSelect">
				<view style="margin-bottom: 25rpx;width: 100%;" v-for="(item,index) in materials" :key="index">
					<!-- 仓库关联 -->
					<view class="productTop" style="margin-bottom: 15rpx;">
						<view class="blocks1" @click="handeleStore(index)">
							<view style="color: #999999 ;">{{item.name || '请选择仓库'}}</view>
							<image style="width: 16rpx;height: 12rpx;" src="/static/work/cg_fl_02.png" mode=""></image>
						</view>
						<view class="blocks1" >
							<input v-model="item.batchNumber" style="font-size: 24rpx;color: #999999 ;"
								placeholder-style="font-size:24rpx" type="number" placeholder="请输入批次号">
							
						</view>
						<view class="blocks" style="margin-right: 10rpx;">
							<input v-model="item.count" style="font-size: 24rpx;color: #999999;min-width: 60rpx;"
								placeholder-style="font-size:24rpx" type="number" placeholder="请输入数量">
							<view style="width: 150rpx;margin-left: 10rpx;">{{item.unitName}}</view>
						</view>
						<view class="imgBlock" @click="handeleNewStoreReduct" v-if="materials.length>1">
							<image class="img" src="/static/work/cg_add04.png" mode=""></image>
						</view>
					</view>

				</view>
			</view>

			<view class="submit">
				<u-button :loading='loading' :disabled="disabled" :custom-style="customStyleBtn1" @click="submit">确认成品入库</u-button>
			</view>
		</view>

		<!-- 仓库 -->
		<!-- <u-picker :show="show" ref="uPicker" @cancel="show = false" :columns="columnslibrary" @confirm="confirm" @change="changeHandler"></u-picker> -->
		<Warehouse @setValueName="handleSetValueName"  ref="warehouseRef"/>
	</view>
</template>

<script>
	import Warehouse from '@/components/Warehouse.vue'
	import {
		constructGroups
	} from '@/utils/common.js'
	import {getWarehouse,getProductionInProductInfo,createProductionIn} from '@/api/store.js'
	export default {
		components:{
			Warehouse
		},
		data() {
			return {
				disabled:true,//按钮
				loading: false,//按钮
				show: false,
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				columnslibrary: [],//仓库一级数据
				columnData: [],//仓库二级数据
				index: 0, //选中仓库的下标
				materials:[],
				productionOrderId:'',
				model:{},
				backups:{}
			}
		},
		onLoad() {
			this.handleCustomEventBind = this.handleCustomEvent.bind(this);
			uni.$on('finishedProduct', this.handleCustomEventBind);
			
		},
		methods: {
			
			// 提交
			async submit() {
				let bol = false
				for (const item of this.materials) {
					if (!item.warehouseId) {
						uni.showToast({
							title:'请选择货位',
							icon:'none'
						})
						bol = true
						break; // 找到目标，终止循环
					}
					if(!item.batchNumber){
						uni.showToast({
							title:'请输入批次号',
							icon:'none'
						})
						bol = true
						break; // 找到目标，终止循环
					}
					if(!item.count){
						uni.showToast({
							title:'请输入数量',
							icon:'none'
						})
						bol = true
						break; // 找到目标，终止循环
					}
				}
				if (bol) return
				this.loading = true
				let data={
					productionOrderId:this.productionOrderId,
					productionInItemsSaveReqVOList:this.materials.map(item=>{
						return{
							batchNumber:item.batchNumber,
							count:item.count,
							productId:item.productId,
							warehouseId:item.warehouseId
						}
					})
				}
				let res = await createProductionIn(data)
				res.code ==0 && uni.showToast({
					title:'操作成功',
					icon:'none'
				})
				res.code==0 && uni.navigateBack()
				res.code != 0 && uni.showToast({
					title:res.msg,
					icon:'none'
				})
				this.loading = false
			},
			// 库位选项
			handleSetValueName(val){
				// console.log('materials:',this.materials[this.index]);
				console.log('库位选项:',val);
				// this.materials[this.index].warehouseId = b[0].id
				// this.materials[this.index].name = b[0].name
				this.materials[this.index].name = val.name
				this.materials[this.index].warehouseId = val.id
				console.log('materials:',this.materials);
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				let b = this.moneys.filter(item => item.name == e.value[1])
				this.materials[this.index].warehouseId = b[0].id
				this.materials[this.index].name = b[0].name
				this.show = false
			},
			
			// 选择仓库
			handeleStore(index) {
				this.$refs.warehouseRef.handleIsShow([],false)
				this.index = index
			},
			// 减仓库
			handeleNewStoreReduct(index) {
				uni.showModal({
					title: '提示',
					content: '确认删除此仓库？',
					success: res => {
						if (res.confirm) {
							this.materials.splice(index, 1)
						}
					}
				});
			},
			// 新增仓库选项
			handeleNewStore() {
				this.materials.push(this.backups )
			},
			
			// Picker选择生产单号确定
			handeleConfirm(e){
				this.disabled = false
				this.list.oddNumbers = e.value[0].value
				this.list.oddId = e.value[0].id
				this.oddShow = false
			},
			// Picker选择生产单号取消
			handeleCancel(){
				this.oddShow = false
			},
			// 跳转至生产单列表
			handleProducts(){
				uni.navigateTo({
					url:'/pages/work/produce/productionOrderList'
				})
			},
			// 获取仓库货位列表
			async getWarehouses() {
				let response = await getWarehouse()
				this.moneys = response.data.list
				const arr = response.data.list.map(item => {
					return {
						id: item.parentId ? null : item.id,
						name: item.name,
						parentId: item.parentId,
					}
				})
				let objs = constructGroups(arr)
				this.columnslibrary = objs.columns
				this.columnData = objs.columnData
			},
			async handleCustomEvent(val){
				this.disabled = false
				this.productionOrderId = val.data.id
				this.model = val.data
				let res = await getProductionInProductInfo({id:val.data.id})
				console.log(res.data);
				this.materials = res.data.map(item=>{
					return{
						...item,
						name:'',
						warehouseId:''
					}
				})
				let newArr = res.data.map(item=>{
					return{
						...item,
						name:'',
						warehouseId:''
					}
				})
				this.backups = JSON.parse(JSON.stringify(newArr[0]))
				this.getWarehouses()
			}
		},
		onUnload(){
			uni.$off('finishedProduct')
		}
	}
</script>

<style scoped>
	.submit {
		width: 100%;
		position: relative;
		margin-top: 69rpx;
		margin-bottom: 100rpx;
	}

	.imgBlock {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.blocks1 {
		flex: 1;
		height: 60rpx;
		background-color: aqua;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		margin-right: 20rpx;
		background: #FFFFFF;
		border: 1rpx solid #EBEBEB;
		padding: 18rpx 21rpx;
		box-sizing: border-box;
	}

	.blocks {
		flex: 1;
		height: 60rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		background: #FFFFFF;
		border: 1rpx solid #EBEBEB;
		padding: 18rpx 21rpx;
		box-sizing: border-box;
	}

	.productBottom {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.productTop {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.img {
		width: 34rpx;
		height: 34rpx;
	}

	.productSelect {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 38rpx;
	}

	.productHeader {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		justify-content: space-between;
	}

	.productStore {
		width: 750rpx;
		background-color: #FFFFFF;
		height: calc(100vh - 300rpx);
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		padding: 42rpx 29rpx 0 28rpx;
		box-sizing: border-box;
	}

	.headerNumber {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.iner {
		width: 750rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 37rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.container {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;
	}

	page {
		background-color: #F8F8F8;
	}
</style>